<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>home</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css"/>
<link rel="stylesheet" type="text/css" href="/stylesheets/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/>
</head>
<body >
	<nav id="menu" class="menu">
		<aside class="aside-header">
				<header >
					<div class="clearfix">
						<div class="col-xs-2">
							<div class=" home_header">
								<img src="/images/header.jpg" alt="">
							</div>
						</div>
						<div class="col-xs-8" >
							<p  class="q_title"><%=loginuser.username%></p>
							<p class="rank"><i class="fa fa-diamond"></i> <i class="fa fa-diamond"></i> <i class="fa fa-heart"></i></p>
						</div>
						<div class="col-xs-2 my-code">
							<i class="fa fa-qrcode"></i>
						</div>
			
					</div>
					<p class=" autograph">“ 编辑个性签名</p>
				</header>
				<ul class="list-unstyled aside-list">
					<li><i class="fa fa-qq"></i> &nbsp;了解会员特权</li>
					<li><i class="fa fa-credit-card"></i> &nbsp; QQ钱包</li>
					<li><i class="fa fa-female"></i> &nbsp;个性装扮</li>
					<li><i class="glyphicon glyphicon-star"></i> &nbsp;我的收藏</li>
					<li><i class="fa fa-file-image-o"></i> &nbsp;我的相册</li>
					<li><i class="fa fa-folder-open"></i> &nbsp;我的文件</li>
					<li><i class="fa fa-newspaper-o"></i> &nbsp;我的名片夹</li>
				</ul>
				<div class="aside-footer">
					<span class="col-xs-4"><i class="fa fa-gear"></i> 设置</span> 
					<span class="col-xs-4"><i class="fa fa-certificate"></i> 夜间</span> 
					<span class="col-xs-4"><i class="glyphicon glyphicon-map-marker"> </i><span class="centigrade">21℃</span>济南</span>
				</div>
		</aside>
	</nav>
	<div id="main" class="panel">
		<header class="header home-header">
			<div class=" home_header js-slideout-toggle">
				<img src="/images/header.jpg" alt="">
			</div>
			
			<div class="home_title">
				<div id="message">消息</div><div id="phone">电话</div>
			</div>
			<div class="add-personal">
				<i class="fa fa-plus"></i>
			</div>
		</header>
		<div  class="search">
			<i class="fa fa-search "> 搜索</i>
		</div>
		<main>
			<ul class="list-unstyled message-ul">
			<%list.forEach(function(item,i){%>
				<% if(item !=loginuser.username && item){%>
					<li to='<%= item%>' from='<%= loginuser.username%>'>
						<div class="message-wrap clearfix">
							<div class="col-xs-2 q_img">
								<img src="/images/header.jpg" alt="">
							</div>
							<div class="col-xs-8 message_info">
								<div class="q_title">
									<p><%=item%></p>
								</div>
								<div class="q_tip">
									<p>朱占收:不考研的同学……</p>
								</div>
							</div>
							<div class="col-xs-2 message_number">
								<p>10:09</p>
								<div id="message_number">23</div>
							</div>
						</div>
					</li>
				<%}%>
			<%})%>
			</ul>
		</main>
		<div class="footer home-footer clearfix">
			<div class="col-xs-4 footer-active">
				<p><i class="fa fa-commenting fa-lg"></i></p>
				<p style="padding-top: 5px;">消息</p>
				<div id="message_number_all">99+</div>

			</div>
			<div class="col-xs-4">
				<p><i class="fa fa-user fa-lg"></i></p>
				<p style="padding-top: 5px;">联系人</p>
			</div>
			<div class="col-xs-4">
				<p><i class="fa fa-heart fa-lg"></i></p>
				<p style="padding-top: 5px;">动态</p>
			</div>
		</div>
	</div>



	<script src="/javascripts/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/javascripts/slideout.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/javascripts/socket.io.js" type="text/javascript" charset="utf-8"></script>
	<script src="/javascripts/main.js" type="text/javascript" charset="utf-8"></script>
	<script type='text/javascript'>
		var slideout = new Slideout({
	        'panel': document.getElementById('main'),
	        'menu': document.getElementById('menu'),
	        'padding': 280,
	        'tolerance': 70
		});
		document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
	        slideout.toggle();
	      });
		
	</script>
</body>
</html>
